<!--
*@Author: QWP
*@Description: 灾害直报显示-新展示版本
*@Date: 2024-07-18 18:33:03
-->
<template>
  <u-card title="灾害事故直报">
    <a-timeline style="height: 764px; padding-top: 8px">
      <a-timeline-item v-for="item in datas">
       <a-row :gutter="8">
        <a-image :src="urlFile('login/loginBg1.png')"
          width="90px"
          height="90px"
          :preview="false"
          style="border-radius: 8px;">
        </a-image>
        <a-col flex="1">
          <a-row justify="space-between">
            <span style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 16px;color: #1890FF;line-height: 32px;">
              {{ item.title }}
            </span>
          </a-row>
          <a-row style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 16px;color: #333333;line-height: 32px;overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap;">
            {{ item.msg }}
          </a-row>
          <a-row style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 14px;color: #666666;line-height: 22px;">
            <span>开始时间: {{ item.sDate }}</span>
            <span>结束时间: {{ item.eDate }}</span>
          </a-row>
        </a-col>
       </a-row>
      </a-timeline-item>
    </a-timeline>
  </u-card>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import { Item } from 'ant-design-vue/es/menu';
import { urlFile } from '@/util/common';

onMounted(() =>  {
  for(let i = 0; i <= 10; i++) {
    datas.push({
      title: `直报灾害事件${i+1}`,
      msg: `直报灾害事件的相信描述信息${i+1}`,
      sDate: '2024-07-17 11:00',
      eDate: '2024-07-17 18:00',
      swNum: 0,
      ssNum: 0,
      shizongNum: 0,
      souzaiNum: 0,
      souzaiMj: 0,
      tbr: '丁艳玲',
    })
  }
})

const datas = reactive<any[]>([])
</script>

<style lang='scss' scoped>
</style>